<template>
	<!-- vue3页面 -->
	<div class="wrap">
		<div class="leftWrap">
			<!-- <el-slider v-model="rangeValue" range :marks="marks" /> -->

			<el-tree ref="leftTreeRef" :expand-on-click-node="false" :data="leftTreeData" node-key="id" check-strictly
				default-expand-all>
				<template #default="{ data, node }">
					<div class="custom-tree-node">
						<el-checkbox v-model="data.checked" :indeterminate="data.isIndeterminate"
							@change="handleCheckChange($event, data, node)" @click.stop
							v-if="data.isRoot"></el-checkbox>
						<el-checkbox v-model="data.isChecked" :indeterminate="data.isIndeterminate"
							@change="handleCheckChange($event, data, node)" @click.stop v-else></el-checkbox>

						<span class="custom-name">{{ data.name }}</span>
					</div>
				</template>
			</el-tree>
		</div>
		<div class="rightWrap">
			<el-tree :data="rightTreeData" node-key="id" default-expand-all>
				<template #default="{ data }">
					<div :class="data.highlight ? 'custom-tree-node high-light' : 'custom-tree-node'">
						<span>{{ data.name }}</span>
						<el-icon color="#3e5ecd" v-if="data.highlight">
							<CircleCheckFilled />
						</el-icon>
					</div>
				</template>
			</el-tree>
		</div>
	</div>
</template>

<script lang='ts'>
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import treeData from '@/utils/treeData'

export default defineComponent({
	name: 'oneFive',
	components: {
		CircleCheckFilled
	},
	setup() {
		const leftTreeData = ref(treeData)
		const rightTreeData: any = ref([])
		const leftTreeRef = ref<any>();

		const handleCheckChange = (e: boolean, data: any, node: any) => {
			console.log(e, data, node, 'val,data,node');
			if (e) {
				//这里是增加
				findAllParent(node, true);
				data.highlight = true;

				if (node.isLeaf) {
					//是最底层
					data.isChecked = true;

				} else {
					// 不是最底层
					data.isIndeterminate = false;
					if (data.isRoot) {
						data.isChecked = false;
						data.checked = true;
						data.children.forEach((i:{isChecked:boolean}) => {
							i.isChecked = true;
						})
					} else {
						data.isChecked = true;

					}
					// 处理子节点
					findAllChild(data, true)
				}

			} else {
				data.highlight = false;
				if (node.isLeaf) {
					//是最底层
					data.isChecked = false;
					findAllParent(node, false);

				} else {
					// 不是最底层
					data.isChecked = false;
					data.isIndeterminate = false;
					// 处理父节点
					findAllParent(node, false);
					// 处理子节点
					findAllChild(data, false)

					node.parent.data.highlight = false;

				}
			}

			// 处理右侧树数据
			let rightNode: any;

			//获取左边第二层的父节点
			if (!data.isRoot) {
				let parent = data.linkId.split(',')[1];
				let nodeSelf = leftTreeRef.value!.getNode(parent);
				rightNode = nodeSelf.data;
			} else {
				rightNode = data;
			}

			dealHighLight(rightNode);

			console.log(rightNode, 'rightNode===');

			console.log(rightTreeData.value, 'rightTreeData====');



			// let index = rightTreeData.value.findIndex((item: any) => item.id === rightNode.id);
			// console.log(index, 'index在第几个？？？？');

			console.log(rightNode, 'rightNoderightNoderightNode');

			let index = -1;
			if (data.isRoot) {
				let delIndex = data.children.map((i:{id:string}) => i.id);
				rightTreeData.value = rightTreeData.value.filter((i:{id:string}) => !delIndex.includes(i.id))
			} else {
				index = rightTreeData.value.findIndex((item: any) => item.id === rightNode.id);
			}


			if (index !== -1) {
				if (buildRightTree([rightNode]).length == 0) {
					rightTreeData.value.splice(index, 1);
				} else {
					rightTreeData.value[index] = buildRightTree([rightNode])[0];
				}
			} else {
				let _d = data.isRoot ? rightNode.children : [rightNode]
				rightTreeData.value = rightTreeData.value.concat(buildRightTree([..._d]));
			}

			console.log(rightTreeData.value, 'rightTreeData右边树！！！');


		}
		// 处理右侧树数据
		const buildRightTree = (nodes: any) => {
			let ret: any = [];
			nodes.forEach((node: any) => {
				const newNode = { ...node };
				delete newNode.children;
				node.children && (newNode.children = buildRightTree(node.children));
				if (newNode.isChecked || (newNode.children && newNode.children.length > 0)) {
					ret.push(newNode);
				}
			});
			return ret;
		}
		// 处理所有子节点
		const findAllChild = (data: any, checked: boolean) => {
			if (data.children) {
				data.children.forEach((item: any) => {
					item.isChecked = checked ? true : false;
					item.isIndeterminate = false;
					item.highlight = false;
					findAllChild(item, checked);
				});
			}
		}
		// 处理所有父节点
		const findAllParent = (node: any, checked: boolean) => {
			if (node.parent) {
				// 重置半选状态为空
				node.parent.data.isIndeterminate = true;
				node.parent.data.isChecked = false;
				node.parent.data.checked = false;
				if (!checked) {
					//如果是删除的情况 就要去找该节点下children里有没有ischecked为true的 如果没有则不要设置半选 全取消掉
					if (node.data.children.findIndex((item: any) => item.isChecked || item.isIndeterminate) === -1) {
						node.data.isIndeterminate = false;
						node.data.isChecked = false;
						node.data.checked = false;
					}
				}
				findAllParent(node.parent, checked);
			}
		}

		//处理右侧选中的颜色
		const dealHighLight = (data: any) => {
			console.log(data, 'dddd');
			data.higlight = false;
			if (data.children) {
				if (data.isChecked) {
					data.highlight = true;
				} else {
					data.children.forEach((item: any) => {
						item.highlight = false;
						dealHighLight(item);
					});
				}
			}
		}


		// 处理左侧树数据
		const dealLeftTreeData = (data: any) => {
			for (let i in data) {
				let element = data[i];
				element.isChecked = false;
				dealLeftTreeData(element.children);
			}
		}
		onMounted(() => {
			dealLeftTreeData(leftTreeData.value)
		})


		return {
			leftTreeData,
			rightTreeData,
			handleCheckChange,
			leftTreeRef,
		}
	}
})
</script>

<style scoped lang="less">
.wrap {
	width: 100%;
	display: flex;

	.leftWrap {
		width: 50%;
		height: 500px;
		background: pink;
		overflow: auto;
	}

	.rightWrap {
		width: 50%;
		height: 500px;
		background: #ccc;
		overflow: auto;

		.high-light {
			background: pink;
			color: red;
			justify-content: space-between;
		}
	}

	.custom-tree-node {
		display: flex;
		align-items: center;
		width: 100%;

		.custom-name {
			margin-left: 5px;
		}
	}

	:deep(.el-tree-node__label) {
		width: 100%;
	}
}
</style>